var imgCon,ul,left,right,prev,banner;
var arr=["../img/001.jpg","../img/002.jpg","../img/003.jpg","../img/004.jpg","../img/005.jpg"];
var list=[];
var bnSrc = ["../img/left.png", "../img/right.png"];
var pos=0;
var direction="left";
var bool=false;
var x=0;
var time=200;
var autoBool=false;

init();
      function init() {
        var carousel = document.createElement("div");
        banner=document.querySelector(".banner");
        carousel.className = "carousel";
        createImgCon(carousel);
        createDot(carousel);
        createBn(carousel);
        banner.appendChild(carousel);
        setInterval(animation, 16);
        changePrev(0);
        carousel.addEventListener("mouseenter", mouseHandler);
        carousel.addEventListener("mouseleave", mouseHandler);
      }
      function mouseHandler(e) {
        if (e.type === "mouseenter") {
          autoBool = false;
        } else if (e.type === "mouseleave") {
          time = 200;
          autoBool = true;
        }
      }
      function createImgCon(carousel) {
        imgCon = document.createElement("div");
        imgCon.className = "img-con";
        imgCon.appendChild(getImage(0));
        carousel.appendChild(imgCon);
      }
      function createDot(carousel) {
        ul = document.createElement("ul");
        ul.className="uls"
        for (var i = 0; i < arr.length; i++) {
          var li = document.createElement("li");
          ul.appendChild(li);
        }
        carousel.appendChild(ul);
        ul.addEventListener("click", clickHandler);
      }
      function createBn(carousel) {
        for (var i = 0; i < bnSrc.length; i++) {
          var bn = new Image();
          if (i === 0) {
            left = bn;
          } else {
            right = bn;
          }
          bn.src = bnSrc[i];
          bn.className = i === 0 ? "left" : "right";
          carousel.appendChild(bn);
        }
        right.addEventListener("click", bnClickHandler);
        left.addEventListener("click", bnClickHandler);
      }
      function bnClickHandler(e) {
        if (bool) return;
        if (this === left) {
          direction = "right";
          pos--;
          if (pos < 0) pos = arr.length - 1;
        } else {
          direction = "left";
          pos++;
          if (pos > arr.length - 1) pos = 0;
        }
        createNextImage();
      }
      function getImage(num) {
        if (num > arr.length - 1) return;
        if (list[num]) return list[num];
        var img = new Image();
        img.src =  arr[num];
        list[num] = img;
        return img;
      }
      function clickHandler(e) {
        if (bool) return;
        if (e.target.nodeName !== "LI") return;
        var index = Array.from(ul.children).indexOf(e.target);
        if (index === pos) return;
        direction = index > pos ? "left" : "right";
        pos = index;
        createNextImage();
      }
      function changePrev() {
        if (prev) {
          prev.style.backgroundColor = "rgba(255,0,0,0)";
        }
        prev = ul.children[pos];
        prev.style.backgroundColor = "rgba(255,0,0,1)";
      }
      function createNextImage() {
        if (direction === "left") {
          x = 0;
          imgCon.appendChild(getImage(pos));
        } else if (direction === "right") {
          imgCon.insertBefore(getImage(pos), imgCon.firstElementChild);
          imgCon.style.left = -getImage(pos).offsetWidth -20+ "px";
          x = -getImage(pos).offsetWidth-20;
        }
        changePrev();
        bool = true;
      }
      function animation() {
        moveImg();
        autoMove();
      }
      
      function autoMove() {
        if (!autoBool) return;
        time--;
        if (time > 0) return;
        time = 200;
        var evt = new Event("click");
        right.dispatchEvent(evt);
      }

      function moveImg() {
        if (!bool) return;
        if (direction === "left") {
          x -= 50;
          if (x <= -getImage(pos).offsetWidth) {
            bool = false;
            imgCon.firstElementChild.remove();
            x = 0;
          }
        } else if (direction === "right") {
          x += 50;
          if (x >= 0) {
            bool = false;
            imgCon.lastElementChild.remove();
          }
        }
        imgCon.style.left = x + "px";
      }